<template>
	<div id="app" v-loading.fullscreen.lock="loading">
		<el-container class="app-container">
			<el-main>
				<div class="basicInformation">
					<h1>基础信息</h1>
					<!-- style="border-bottom: 1px solid #e6ebf5;" -->
					<el-form :inline="true" class="slForm" ref="slForm" :model="slForm" :rules="rules"
						label-position="right">
						<el-row>
							<el-col :span="8">
								<el-form-item style="width:100%" prop="collectWay">
									<template #label>
										收款方式
										<el-popover placement="right" width="400" trigger="hover">
											<h3>请仔细阅读以下说明</h3>
											<p>如有<span>一次性收款</span>，直接选择“一次性收款并结项”</p>
											<p>如有<span>分三次及三次以上收款</span>，第一次选择“申请首次收款”，第二次选择“申请尾款”</p>
											<p>如有<span>分三次及三次以上收款</span>，第一次选择“申请首次收款”，中间付款选择“申请阶段收款”，最后一笔选择“申请尾款”
											</p>
											<p><span>据实结算</span>的收款方式仅支持费用类型是会议类，框架服务模式，按场次收款的项目，可多次申请</p>
											<i class="el-icon-info" slot="reference"></i>
										</el-popover>
									</template>
									<el-select style="width:100%" disabled v-model="slForm.collectWay"
										placeholder="请选择收款方式" @change="getProjectConfigFun">
										<el-option v-for="(item,i) in collectWayEnums" :key="i" :label="item.label"
											:value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item style="width:100%" prop="feeType">
									<template #label>费用类型</template>
									<el-select style="width:100%" v-model="slForm.feeType" placeholder="请选择收款方式"
										disabled>
										<el-option v-for="(item,i) in feeTypeEnums" :key="i" :label="item.label"
											:value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item style="width:100%" prop="projectName">
									<template #label>项目名称</template>
									<el-input style="width:100%" v-model="slForm.projectName" placeholder="请输入项目名称"
										disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item style="width:100%" v-if="slForm.collectWay=='2' ||slForm.collectWay=='3'">
									<template #label>上阶段收款金额</template>
									<el-input style="width:100%" disabled type="number"
										v-model.number="slForm.lastUsedMoney" placeholder="请完善上阶段结算明细">
										<template slot="append">元</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item style="width:100%" prop="applyMoney">
									<template #label>本次收款金额</template>
									<el-input style="width:100%" disabled type="number"
										v-model.number="slForm.applyMoney" placeholder="请完善结算明细">
										<template slot="append">元</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item style="width:100%" prop="supplierName">
									<template #label>供应商名称</template>
									<el-input style="width:100%" disabled v-model="slForm.supplierName"
										placeholder="请输入供应商名称"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item style="width:100%" prop="feeTypeNo">
									<template #label>金蝶费用类型</template>
									<el-select style="width:100%" disabled v-model="slForm.feeTypeNo" filterable
										placeholder="请选择金蝶费用类型">
										<el-option v-for="item in expenseItem" :key="item.expenseItemID"
											:label="item.expenseItem" :value="item.expenseItemID">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item style="width:100%">
									<template #label>金蝶项目编号</template>
									<el-input disabled style="width:100%" v-model="slForm.projectNo"
										placeholder="请输入金蝶项目编号"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item style="width:100%" prop="receiptType">
									<template #label>发票类型</template>
									<el-select style="width:100%" disabled v-model="slForm.receiptType"
										placeholder="请选择收款方式">
										<el-option v-for="(item,i) in receiptTypeEnums" :key="i" :label="item.label"
											:value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item style="width:100%" prop="deliveryNum">
									<template #label>快递单号</template>
									<el-input style="width:100%" disabled v-model="slForm.deliveryNum"
										placeholder="邮寄纸质材料快递单号 (若无不填写)"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item style="width:100%" prop="meetingIds">
									<template #label>本次结算会议</template>
									<el-select style="width:100%" v-model="slForm.meetingIds" placeholder="请选择您要结算的会议"
										clearable multiple :collapse-tags="false" disabled>
										<el-option v-for="item in meetingList" :key="item.id" :label="item.meetingTitle"
											:value="Number(item.id)">
											{{ item.meetingTitle }} / {{ $moment(item.updateTime).format('lll') }}
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>



				<!--        <el-collapse >-->
				<!--          <el-collapse-item v-for="(item, meetingIndex) in processedMeetingList" :key="item.meetingId" :title="item.meetingName" :name="meetingId">-->

				<!--          </el-collapse-item>-->
				<!--          <el-collapse-item title="反馈 Feedback" name="2">-->

				<!--          </el-collapse-item>-->
				<!--        </el-collapse>-->



				<div v-for="(item, meetingIndex) in processedMeetingList" :key="item.meetingId">
					<!-- 模块一：必须上传的附件 -->
					<div class="basicInformation">
						<h1>必须上传的附件</h1>
						<el-table :data="filteredFolderList(item)" border>
							<el-table-column prop="folderName" label="文件名" align="center"
								min-width="260"></el-table-column>
							<el-table-column label="是否上传附件" align="center" width="120">
								<template #default="scope">
									<el-tag v-if="scope.row.files && scope.row.files.length > 0"
										type="success">是</el-tag>
									<el-tag v-else type="danger">否</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="智能审核结果" align="center" width="120">
								<template #default="scope">
									<el-tag v-if="scope.row.aiAuditStatus == 1" type="success" effect="plain">
										通过
									</el-tag>
									<el-tag v-else-if="scope.row.aiAuditStatus == 2" type="danger" effect="plain">
										不通过
									</el-tag>
									<el-tag v-else type="warning" effect="plain">
										待审核
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="预审驳回原因" align="center" min-width="300" fit>
								<template #default="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.aiExamineMessage "
										placement="top">
										<div class="reasonsForRejection" v-if="scope.row.aiAuditStatus != '1'">
											<!-- // {{ scope.row.aiExamineMessage || '-' }} -->
											<span v-if="!scope.row.aiExamineMessage"> - </span>
											<template v-else>
												<p v-for="(item,i) in scope.row.aiExamineMessage.split('；').filter(item=>item)"
													:key="i" style="text-align: left;">
													<b>{{i+1+`:`}}</b>
													{{item}};
												</p>
											</template>
										</div>
									</el-tooltip>
								</template>
							</el-table-column>


							<el-table-column label="最终审核结果" align="center" width="120">
								<template #default="scope">
									<el-tag v-if="scope.row.auditStatus === 1" type="success">
										通过
									</el-tag>
									<el-tag v-else-if="scope.row.auditStatus === 2" type="danger">
										不通过
									</el-tag>
									<el-tag v-else type="warning">
										待审核
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="文件驳回原因" align="center" min-width="300">
								<template #default="scope">
									<el-tooltip class="item" effect="dark" :content="scope.row.examineMessage "
										placement="top">
<!--										<div class="reasonsForRejection" v-if="scope.row.auditStatus != '1'">-->
<!--											{{ scope.row.examineMessage || '-' }}-->
<!--										</div>-->


                    <div v-if="scope.row.auditStatus != 1" style="text-align: left;">
                      <!-- 直接使用 scope.row 作为文件夹 -->
                      <!--                                    <div style="font-weight: bold;">-->
                      <!--                                        【{{ scope.row.folderName }}】-->
                      <!--                                    </div>-->

                      <div v-if="scope.row.examineMessage" style="margin-left: 15px; color: #d32f2f;">
                        - 文件夹驳回原因：{{ scope.row.examineMessage }}
                      </div>

                      <div v-for="(file, index) in scope.row.files" :key="index" style="margin-left: 15px;">
                        <div v-if="file.examineMessage" style="color: #d32f2f;">
                          - 【{{ file.fileName }}】：{{ file.examineMessage }}
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      -
                    </div>

									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="审核规则" align="center" min-width="500">
								<template #default="scope">
									<div v-if="scope.row.auditStatus != '1'">
										{{scope.row.fileUploadRequirement}}
									</div>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="100" align="center" fixed="right">
								<template #default="scope">
									<el-link @click="viewFilesWithFolder(scope.row)">去查看</el-link>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<!-- 模块二： 上次结算明细  本次结算明细 -->
					<div class="basicInformation">



						<h1>费用明细</h1>
						<h3>本次结算明细</h3>
						<el-table :data="item.spendingDetailDtos" style="width: 100%" show-summary
							:summary-method="getspendingDetailSummaries" border>
							<el-table-column label="序号" width="80" type="index" align="center"></el-table-column>
							<el-table-column label="费用分类" align="center" min-width="260px">
								<template #default="scope">
									<el-select v-model="scope.row.spendingProjectCode" placeholder="请选择收款方式" disabled
										filterable clearable style="width: 100%;">
										<el-option v-for="detail in projectTree" :key="detail.id"
											:label="detail.projectType" :value="detail.id.toString()" />
									</el-select>
								</template>
							</el-table-column>
							<el-table-column label="金额(元)" align="center" width="120">
								<template #default="scope">
									{{scope.row.money}}
									<!-- <el-input type="number" v-model.number="scope.row.money" placeholder="仅支持数字及小数点后2位"
										:min="0" disabled @input="moneyChange(scope.$index, $event, meetingIndex, 'C')">
										<template #append>元</template>
									</el-input> -->
								</template>
							</el-table-column>
							<el-table-column label="是否上传附件" align="center" width="120px">
								<template #default="scope">
									<el-tag v-if="hasUploadedFiles(scope.row)" type="success">是</el-tag>
									<el-tag v-else type="danger">否</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="智能审核结果" align="center" width="120px">
								<template #default="scope">
									<el-tag v-if="getAiAuditResult(scope.row.folderNodeList) === 'pass'" type="success"
										effect="plain">
										通过
									</el-tag>
									<el-tag v-else-if="getAiAuditResult(scope.row.folderNodeList) === 'fail'"
										type="danger" effect="plain">
										不通过
									</el-tag>
									<el-tag v-else type="warning" effect="plain">
										待审核
									</el-tag>
								</template>
								<!--								<template #default="scope">-->
								<!--									<el-tag v-if="scope.row.aiAuditStatus == 1" type="success" effect="plain">-->
								<!--										通过-->
								<!--									</el-tag>-->
								<!--									<el-tag v-else-if="scope.row.aiAuditStatus == 2" type="danger" effect="plain">-->
								<!--										不通过-->
								<!--									</el-tag>-->
								<!--									<el-tag v-else type="warning" effect="plain">-->
								<!--										待审核-->
								<!--									</el-tag>-->
								<!--								</template>-->
							</el-table-column>
							<el-table-column label="智能预审驳回原因" align="center" min-width="300">
								<template #default="scope">
									<div v-if="scope.row.aiAuditStatus != 1" style="text-align: left;">
										<div v-for="folder in scope.row.folderNodeList" :key="folder.id"
											style="margin-bottom: 10px;">
											<div v-if="folder.aiExamineMessage" style="font-weight: bold;">
												【{{ folder.folderName }}】</div>
											<div v-if="folder.aiExamineMessage" style="margin-left: 15px;">
												- 文件夹驳回原因：
												<!-- {{ folder.aiExamineMessage }} -->
												<span v-if="!folder.aiExamineMessage"> - </span>
												<template v-else>
													<p v-for="(item,i) in folder.aiExamineMessage.split('；').filter(item=>item)"
														:key="i" style="text-align: left;">
														<b>{{i+1+`:`}}</b>
														{{item}};
													</p>
												</template>
											</div>
											<div v-for="(file, index) in folder.files" :key="index"
												style="margin-left: 15px;">
												<div v-if="file.aiExamineMessage">
													- 【{{ file.fileName }}】：{{ file.aiExamineMessage }}
												</div>
											</div>
										</div>
										<!-- 如果整个 folderNodeList 都为空 -->
										<div v-if="!scope.row.folderNodeList || scope.row.folderNodeList.length === 0">
											暂无驳回原因
										</div>
									</div>
									<div v-else>
										-
									</div>
								</template>
							</el-table-column>
							<el-table-column label="最终审核结果" align="center" width="120px">
								<template #default="scope">
									<el-tag v-if="getFolderOverallStatus(scope.row.folderNodeList) === 1"
										type="success">
										通过
									</el-tag>
									<el-tag v-else-if="getFolderOverallStatus(scope.row.folderNodeList) === 2"
										type="danger">
										不通过
									</el-tag>
									<el-tag v-else type="warning">
										待审核
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="费用驳回原因" align="center" min-width="300">
								<template #default="scope">
									<div v-if="scope.row.auditStatus != 1" style="text-align: left;">
										<div v-for="folder in scope.row.folderNodeList" :key="folder.id"
											style="margin-bottom: 10px;">
											<div v-if="folder.examineMessage" style="font-weight: bold;">
												【{{ folder.folderName }}】</div>
											<div v-if="folder.examineMessage" style="margin-left: 15px;">
												- 文件夹驳回原因：
												<!-- {{ folder.examineMessage }} -->
												<span v-if="!folder.examineMessage"> - </span>
												<template v-else>
													<p v-for="(item,i) in folder.examineMessage.split('；').filter(item=>item)"
														:key="i" style="text-align: left;">
														<b>{{i+1+`:`}}</b>
														{{item}};
													</p>
												</template>
											</div>
											<div v-for="(file, index) in folder.files" :key="index"
												style="margin-left: 15px;">
												<div v-if="file.examineMessage">
													- 【{{ file.fileName }}】：{{ file.examineMessage }}
												</div>
											</div>
										</div>
										<!-- 如果整个 folderNodeList 都为空 -->
										<div v-if="!scope.row.folderNodeList || scope.row.folderNodeList.length === 0">
											暂无驳回原因
										</div>
									</div>
									<div v-else>
										-
									</div>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="100" align="center" fixed="right">
								<template #default="scope">
									<el-link @click="viewFilesWithSpendDetail(scope.row)">去查看</el-link>
								</template>
							</el-table-column>
						</el-table>
						<!-- <div class="subtotal">
							<el-button type="text"
								v-if="slForm.status === 'WAIT' || slForm.status === 'ERROR' || !slForm.id"
								@click="addRows(meetingIndex, 'C')">新增行
							</el-button>
						</div>
						<div class="subtotal">合计本次结算金额：{{ calculateTotal(item) }}元</div> -->

						<h3>上次结算明细</h3>
						<el-table :data="item.lastDetailDtos" style="width: 100%" show-summary
							:summary-method="getspendingDetailSummaries" border>
							<el-table-column label="序号" width="80" type="index" align="center"></el-table-column>
							<el-table-column label="费用分类" align="center" min-width="260px">
								<template #default="scope">
									<el-select v-model="scope.row.spendingProjectCode" placeholder="请选择收款方式" disabled
										filterable clearable style="width: 100%;">
										<el-option v-for="detail in projectTree" :key="detail.id"
											:label="detail.projectType" :value="detail.id.toString()" />
									</el-select>
								</template>
							</el-table-column>
							<el-table-column prop="money" label="金额(元)" align="center" width="120">
								<template #default="scope">
									{{scope.row.money}}
									<!-- <el-input type="number" v-model.number="scope.row.money" placeholder="仅支持数字及小数点后2位"
										:min="0" disabled @input="moneyChange(scope.$index, $event, meetingIndex, 'L')">
										<template #append>元</template>
									</el-input> -->
								</template>
							</el-table-column>
							<el-table-column label="是否上传附件" align="center" width="120px">
								<template #default="scope">
									<el-tag v-if="scope.row.files && scope.row.files.length > 0"
										type="success">是</el-tag>
									<el-tag v-else type="danger">否</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="智能审核结果" align="center" width="120px">
								<template #default="scope">
									<el-tag v-if="scope.row.aiAuditStatus == 1" type="success" effect="plain">
										通过
									</el-tag>
									<el-tag v-else-if="scope.row.aiAuditStatus == 2" type="danger" effect="plain">
										不通过
									</el-tag>
									<el-tag v-else type="warning" effect="plain">
										待审核
									</el-tag>
								</template>
							</el-table-column>

							<el-table-column label="智能预审驳回原因" align="center" min-width="300">
								<template #default="scope">
									<div v-if="scope.row.aiAuditStatus != 1" style="text-align: left;">
										<div v-for="folder in scope.row.folderNodeList" :key="folder.id"
											style="margin-bottom: 10px;">
											<div v-if="folder.aiExamineMessage" style="font-weight: bold;">
												【{{ folder.folderName }}】</div>
											<div v-if="folder.aiExamineMessage" style="margin-left: 15px;">
												- 文件夹驳回原因：
												<!-- {{ folder.aiExamineMessage }} -->
												<span v-if="!folder.aiExamineMessage"> - </span>
												<template v-else>
													<p v-for="(item,i) in folder.aiExamineMessage.split('；').filter(item=>item)"
														:key="i" style="text-align: left;">
														<b>{{i+1+`:`}}</b>
														{{item}};
													</p>
												</template>
											</div>
											<div v-for="(file, index) in folder.files" :key="index"
												style="margin-left: 15px;">
												<div v-if="file.aiExamineMessage">
													- 【{{ file.fileName }}】：{{ file.aiExamineMessage }}
												</div>
											</div>
										</div>
										<!-- 如果整个 folderNodeList 都为空 -->
										<div v-if="!scope.row.folderNodeList || scope.row.folderNodeList.length === 0">
											暂无驳回原因
										</div>
									</div>
									<div v-else>
										-
									</div>
								</template>
							</el-table-column>



							<el-table-column label="最终审核结果" align="center" width="120">
								<template #default="scope">
									<el-tag v-if="getFolderOverallStatus(scope.row.folderNodeList) === 1"
										type="success">
										通过
									</el-tag>
									<el-tag v-else-if="getFolderOverallStatus(scope.row.folderNodeList) === 2"
										type="danger">
										不通过
									</el-tag>
									<el-tag v-else type="warning">
										待审核
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="费用驳回原因" align="center" min-width="300">
								<template #default="scope">
									<div v-if="scope.row.auditStatus != 1" style="text-align: left;">
										<div v-for="folder in scope.row.folderNodeList" :key="folder.id"
											style="margin-bottom: 10px;">
											<div v-if="folder.examineMessage" style="font-weight: bold;">
												【{{ folder.folderName }}】</div>
											<div v-if="folder.examineMessage" style="margin-left: 15px;">
												- 文件夹驳回原因：
												<!-- {{ folder.examineMessage }} -->
												<span v-if="!folder.examineMessage"> - </span>
												<template v-else>
													<p v-for="(item,i) in folder.examineMessage.split('；').filter(item=>item)"
														:key="i" style="text-align: left;">
														<b>{{i+1+`:`}}</b>
														{{item}};
													</p>
												</template>
											</div>
											<div v-for="(file, index) in folder.files" :key="index"
												style="margin-left: 15px;">
												<div v-if="file.examineMessage">
													- 【{{ file.fileName }}】：{{ file.examineMessage }}
												</div>
											</div>
										</div>
										<!-- 如果整个 folderNodeList 都为空 -->
										<div v-if="!scope.row.folderNodeList || scope.row.folderNodeList.length === 0">
											暂无驳回原因
										</div>
									</div>
									<div v-else>
										-
									</div>
								</template>
							</el-table-column>
							<el-table-column width="100" align="center" fixed="right">
								<template #header>操作</template>
								<template #default="scope">
									<el-link @click="viewFilesWithSpendDetail(scope.row)">去查看</el-link>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-main>
		</el-container>


		<div class="auditLog">
			<h1>审核日志</h1>
			<el-table :data="logList" border class="">
				<el-table-column prop="createTime" label="审核时间" align="center">
				</el-table-column>
				<el-table-column prop="operatorName" label="审核人" align="center">
				</el-table-column>
				<el-table-column prop="status" label="审核结果" align="center">
					<template #default="scope">
						{{ formatStatus(scope.row) }}
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="驳回原因" align="center">
					<template #default="scope">
						<div v-if="scope.row.status=='ERROR'">
							{{scope.row.remark}}
						</div>

					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="formOptions" v-if="slForm.status=='OFFICIAL_EXAMINE'">
			<el-button type="primary" @click="openAuditDialog('SUCCESS')">审核通过</el-button>
			<el-button type="danger" @click="openAuditDialog('ERROR')">审核退回</el-button>
		</div>


		<!-- PDF等文件预览弹窗 -->
		<file-preview :visible.sync="showPreview" :url="previewUrl" />

		<!-- 文件标注弹窗 -->
		<el-dialog custom-class="annotationDialog" :title="'标注文件 - ' + currentFileToAnnotate.fileName"
			:visible.sync="fileAnnotateDialogVisible">
			<el-input type="textarea" :rows="4" placeholder="请输入文件标注内容" v-model="fileAnnotationText"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="fileAnnotateDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveFileAnnotation">保存标注</el-button>
			</span>
		</el-dialog>

		<!-- 标注弹窗 -->
		<el-dialog custom-class="annotationDialog" :title="'标注 - ' + currentAnnotateMaterial.folderName"
			:visible.sync="annotateDialogVisible" width="60%">
			<el-input type="textarea" :rows="4" placeholder="请输入标注内容" v-model="annotationText"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="annotateDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveAnnotation">保存标注</el-button>
			</span>
		</el-dialog>

		<!-- 通用审核弹窗 -->
		<el-dialog custom-class="reviewDialog" :title="this.dialogType === 'SUCCESS' ? '审核通过确认' : '审核退回'"
			:visible.sync="auditDialogVisible" width="500px" append-to-body :close-on-click-modal="false">
			<div class="form">
				<h2 v-if="dialogType != 'ERROR'">提交事由：</h2>
				<div v-if="dialogType != 'ERROR'" class="tips">提交事由将会在金蝶中的事由字段中做展示</div>
				<el-form :model="auditForm" ref="auditForm" :rules="auditRules">
					<!-- 动态显示不同字段 -->
					<el-form-item v-if="dialogType === 'SUCCESS'" label="审核备注" prop="remark">
						<el-input maxlength="100" show-word-limit type="textarea" :rows="4" placeholder="请输入审核备注"
							v-model="auditForm.remark"></el-input>
					</el-form-item>
					<el-form-item v-if="dialogType === 'ERROR'" label="退回原因" prop="errorMessage">
						<el-input maxlength="100" show-word-limit type="textarea" :rows="4" placeholder="请输入退回原因"
							v-model="auditForm.errorMessage"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="auditDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmAudit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		allSpendFolderListOfOfficial,
		annotateFile,
		annotateFolder,
		examineSpendingOrder,
		getOrderByIdWithOfficial,
		getProjectConfigWithOfficial,
		listOrderLog,
		officialGetExpenseItem,
		orderMeetingListBOfficial,
		getOrderMeetingListByOrderId,
		queryFile,
		allSpendFolderList
	} from '@/request/api'
	import FilePreview from '@/components/FilePreview.vue';

	export default {
		name: 'newindex',
		components: {
			FilePreview
		},

		computed: {
			// 处理后的会议列表，包含 lastDetailDtos 和 spendingDetailDtos
			processedMeetingList() {
				return this.processMeetingList(this.meetingWithDetailsList);
			}
		},

		data() {
			return {
				meetingWithDetailsList: [], //会议下的全部支出明细
				loading: false,
				//审核日志
				logList: [],
				expenseItem: [],
				slForm: {
					collectWay: '', // 收款方式
					feeType: '', // 费用类型
					projectName: '', // 项目名称
					supplierName: '', // 供应商名称
					applyMoney: 0, // 本次收款金额
					receiptType: '', // 发票类型
					deliveryNum: '', // 快递单号
					spendingDetailDtos: [{
						detailType: "",
						id: "",
						spendingProjectCode: "UM000",
						money: ''
					}], //
					feeTypeNo: '',
					projectNo: ''
				},
				feeTypeEnums: [{
						value: "0",
						label: "会议类"
					},
					{
						value: '1',
						label: "非会议类"
					}
				],
				receiptTypeEnums: [{
						value: "0",
						label: "电子发票"
					}, {
						value: "1",
						label: "纸质发票"
					},
					{
						value: "2",
						label: "电子+纸质发票"
					}
				],

				collectWayList: {
					"0": "一次性收款并结项",
					"1": "首次收款",
					"2": "阶段收款",
					"3": "尾款",
					"4": "据实结算",
				},

				collectWayEnums: [{
					value: "0",
					label: "一次性收款并结项"
				}, {
					value: "1",
					label: "首次收款"
				}, {
					value: "2",
					label: "阶段收款"
				}, {
					value: "3",
					label: "尾款"
				}, {
					value: "4",
					label: "据实结算"
				}],
				auditForm: {
					remark: '', // 审核通过备注
					errorMessage: '' // 审核退回原因
				},
				auditDialogVisible: false, // 控制弹窗显示
				dialogType: '', // 操作类型：SUCCESS/ERROR
				// 表单验证规则
				auditRules: {
					remark: [{
							required: true,
							message: '请输入备注',
							trigger: 'blur'
						},
						{
							min: 1,
							message: '备注不能少于1个字符',
							trigger: 'blur'
						}
					],
					errorMessage: [{
							required: true,
							message: '请输入退回原因',
							trigger: 'blur'
						},
						{
							min: 1,
							message: '原因不能少于1个字符',
							trigger: 'blur'
						}
					]
				},
				projectTree: [],
				meetingList: [],
				hoveredFile: null, // 当前悬停的文件
				// folderList: [],
				// materials: folderData.children,
				showPreview: false,
				previewUrl: '',
				isPdfPreview: false,
				isImagePreview: false,
				currentFile: null,
				currentFileToAnnotate: {
					fileName: ''
				}, // 要标注的文件
				annotateDialogVisible: false,
				fileAnnotateDialogVisible: false, // 文件标注弹窗
				annotationText: '',
				fileAnnotationText: '', // 文件标注内容
				currentAnnotateMaterial: {
					folderName: ''
				},
				spendId: this.$route.query.id,
				rules: {
					collectWay: [{
						required: true,
						message: '请选择收款方式',
						trigger: 'change'
					}],
					feeType: [{
						required: true,
						message: '请选择费用类型',
						trigger: 'change'
					}],
					projectName: [{
						required: true,
						message: '请输入项目名称',
						trigger: 'change'
					}],
					supplierName: [{
						required: true,
						message: '请输入供应商名称',
						trigger: 'change'
					}],
					applyMoney: [{
						required: true,
						message: '请完善本次收款明细',
						trigger: 'change'
					}],
					lastUsedMoney: [{
						required: true,
						message: '请完善上阶段支出明细',
						trigger: 'change'
					}],
					receiptType: [{
						required: true,
						message: '请选择发票类型',
						trigger: 'change'
					}],
					deliveryNum: [{
						required: false,
						message: '请输入快递单号',
						trigger: 'blur'
					}],
					meetingIds: [{
						required: true,
						message: '请选择您要结算的会议场次',
						trigger: 'change'
					}],
					projectNo: [{
						required: true,
						message: '请输入金蝶项目编号',
						trigger: 'change'
					}],
					feeTypeNo: [{
						required: true,
						message: '请选择金蝶项目类型',
						trigger: 'change'
					}]
				},
			}
		},
		mounted() {
			this.orderId = this.$route.query.orderId
			this.getParams();
			this.getExpenseItemFun();
			this.loadData();
			this.loadLog();
		},
		methods: {

			getAiAuditResult(folderList) {
				if (!Array.isArray(folderList) || folderList.length === 0) {
					return '待审核'; // 如果没有数据，默认为待审核
				}

				const hasFail = folderList.some(item => item.aiAuditStatus == 2);
				const allPass = folderList.every(item => item.aiAuditStatus == 1);

				if (hasFail) {
					return 'fail'; // 存在不通过
				} else if (allPass) {
					return 'pass'; // 全部通过
				} else {
					return 'pending'; // 其他情况：待审核（如部分为0或未处理）
				}
			},


			getFolderOverallStatus(folderNodeList) {
				if (!folderNodeList || folderNodeList.length === 0) {
					return 0; // 没有文件夹，默认待审核
				}

				let allPassed = true;
				let hasRejected = false;

				for (const folder of folderNodeList) {
					// 判断是否有文件（files 不为空）
					const hasFiles = folder.files && folder.files.length > 0;

					// 只有当该文件夹有文件时才参与状态判断
					if (hasFiles) {
						if (folder.auditStatus === 2) {
							hasRejected = true;
							break;
						} else if (folder.auditStatus !== 1) {
							allPassed = false;
						}
					} else {
						// 如果文件夹没有文件，也视为未完成审核（待审核）
						allPassed = false;
					}
				}

				if (hasRejected) {
					return 2; // 有驳回项
				} else if (allPassed) {
					return 1; // 全部通过
				} else {
					return 0; // 有文件夹未审核或无文件
				}
			},
			toggleReason(row) {
				this.$set(row, '_showReason', !row._showReason);
			},
			hasUploadedFiles(row) {
				if (!row.folderNodeList || !Array.isArray(row.folderNodeList)) return false;
				return row.folderNodeList.some(folder => folder.files && folder.files.length > 0);
			},
			getspendingDetailSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];

				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '金额合计(元)';
						return;
					}

					const moneyColumnIndex = 2; // 金额列在第3列（索引从0开始）

					if (index === moneyColumnIndex) {
						const values = data.map(item => Number(item.money));
						const total = values.reduce((prev, curr) => {
							const value = isNaN(curr) ? 0 : curr;
							return prev + value;
						}, 0);

						sums[index] = `￥${total.toFixed(2)} 元`;
					} else {
						sums[index] = '';
					}
				});

				return sums;
			},

			// 处理会议列表，分离上次结算和本次结算
			processMeetingList(meetingList) {
				return meetingList.map(meeting => {
					const lastDetailDtos = [];
					const spendingDetailDtos = [];

					if (Array.isArray(meeting.details)) {
						meeting.details.forEach(detail => {
							if (detail.detailType === 'L') {
								lastDetailDtos.push(detail);
							} else if (detail.detailType === 'C' && detail.spendingProjectCode != "1" &&
								detail.spendingProjectCode != "41") {
								spendingDetailDtos.push(detail);
							}
						});
					}

					// ✅ 排序：按 spendingProjectCode 数值升序
					const numericSort = (a, b) => {
						const numA = parseInt(a.spendingProjectCode) || 0;
						const numB = parseInt(b.spendingProjectCode) || 0;
						return numA - numB; // 升序
					};

					lastDetailDtos.sort(numericSort);
					spendingDetailDtos.sort(numericSort);

					return {
						...meeting,
						lastDetailDtos,
						spendingDetailDtos
					};
				});
			},
			// 获取每个会议中 spendingProjectCode == "1" 的 folderNodeList
			filteredFolderList(meeting) {
				const result = [];
				meeting.details?.forEach(detail => {
					if (detail.spendingProjectCode === "1" || detail.spendingProjectCode === "41") {
						result.push(...detail.folderNodeList);
					}
				});
				return result;
			},
			// 合计金额
			calculateTotal(meeting) {
				return meeting.spendingDetailDtos.reduce((sum, detail) => sum + (parseFloat(detail.money) || 0), 0)
					.toFixed(2);
			},
			// 金额输入事件
			moneyChange(index, value, meetingIndex, type) {
				// 你的金额处理逻辑
			},
			// 删除行
			deleteNewRows(index, meetingIndex, type) {
				this.processedMeetingList[meetingIndex].spendingDetailDtos.splice(index, 1);
			},
			// 新增行
			addRows(meetingIndex, type) {
				this.processedMeetingList[meetingIndex].spendingDetailDtos.push({
					spendingProjectCode: '',
					money: ''
				});
			},
			// 支出明细-去查看附件
			viewFilesWithSpendDetail(row) {
				console.log('查看文件夹:', row);
				// 示例：this.$router.push(`/upload/${row.id}`);
				this.$router.push({
					name: 'viewDetail',
					query: {
						orderId: row.supplierApplyCollectId,
						selectedDetailId: row.id,
						selectedMeetingId: row.meetingId
					}
				});
			},

			// 必传材料-去查看附件
			viewFilesWithFolder(row) {
				console.log('查看文件夹:', row);
				this.$router.push({
					name: 'viewDetail',
					query: {
						orderId: row.applyCollectId,
						selectedDetailId: row.spendingDetailId,
						selectedMeetingId: row.meetingId
					}
				});
			},


			//查询审核日志
			loadLog() {
				listOrderLog({
					orderId: this.$route.query.orderId
				}).then(res => {
					if (res.code == 200) {
						this.logList = res.data;
					}
				})
			},
			formatStatus(item) {
				const status = item.status
				const statusMap = {
					OFFICIAL_EXAMINE: '待官员审核',
					SUBMIT: '初审通过',
					ERROR: '初审驳回',
					SUCCESS: '复审通过'
				};
				if (item.operatorId == '0' && status == 'ERROR') {
					return "复审驳回"
				}
				return statusMap[status] || '未知状态';
			},
			// 确认审核操作
			confirmAudit() {
				this.$refs.auditForm.validate(valid => {
					if (valid) {
						this.examineSpendingOrder();
						this.auditDialogVisible = false;
					}
				});
			},
			examineSpendingOrder() {
				console.log('备注：', this.auditForm.remark);
				console.log('审核退回，原因：', this.auditForm.errorMessage);
				this.loadingText = '正在提交···'
				this.loading = true;
				examineSpendingOrder({
					orderId: this.slForm.id,
					status: this.dialogType,
					remark: this.auditForm.remark,
					errorMessage: this.auditForm.errorMessage
				}).then(res => {
					this.loading = false;
					if (res.code == 200) {
						this.$message({
							message: '操作成功',
							type: 'success'
						});
						this.getSheetDataFun();
						this.loadLog()
					} else {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					}
				})
			},
			getExpenseItemFun(itemName) {
				let data = {}
				data.current = 1;
				data.size = 3000;
				if (itemName) data.itemName = itemName
				officialGetExpenseItem(data).then(res => {
					if (res.code == 200) {
						this.expenseItem = res.data.data
					}
				})
			},
			getParams() {
				this.getSheetDataFun();
				this.getProjectConfigFun();
				// 获取当前用户token
				// this.token = localStorage.getItem('regToken') ? JSON.parse(localStorage.getItem('regToken')).token : JSON
				//     .parse(localStorage.getItem('token')).token;
			},
			// 获取结算单信息
			getSheetDataFun() {
				getOrderByIdWithOfficial({
					orderId: this.$route.query.orderId
				}).then(res => {
					if (res.code == 200) {
						let resData = JSON.parse(JSON.stringify(res.data));
						for (let i in resData) {
							if (resData[i] == null) resData[i] = '';
						};
						if (resData.collectWay == 2 || resData.collectWay == 3) {
							resData.lastDetail = [];
							// resData.lastUsedMoney = '';
							let array = []
							resData.spendingDetailDtos.map((item, i) => {
								if (item.detailType == "L") {
									resData.lastDetail.push(item);
								} else {
									array.push(item);
								}
							});
							resData.spendingDetailDtos = array;
						}
						if (resData.meetingIds) {
							// resData.meetingIds
							// console.log(resData.meetingIds);
						} else {
							resData.meetingIds = [];
						};
						// console.log(resData);
						this.slForm = resData;
						this.meetingList = resData.meetingList || [];

						// this.$forceUpdate()
						this.getMeetingList();
					};
				});
			},
			// 获取会议列表
			getMeetingList() {
				let data = {
					orderId: this.orderId
				};
				// orderMeetingListBOfficial(data).then(res => {
				//   if (res.code == 200) this.meetingList = res.data;
				// });
				getOrderMeetingListByOrderId(data).then(res => {
					if (res.code == 200) this.meetingList = res.data;
				});
			},
			// 获取支出明细类型列表
			getProjectConfigFun() {
				allSpendFolderListOfOfficial().then(res => {
					if (res.code == 200) {
						this.projectTree = res.data
					}
				})
			},
			loadData() {
				queryFile({
					id: this.$route.query.orderId
				}).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						// this.folderList = res.data;
						this.meetingWithDetailsList = res.data

					}
				})
			},
			// 打开审核弹窗
			openAuditDialog(type) {
				this.dialogType = type;
				this.auditDialogVisible = true;
				this.resetForm();
				if (type === 'SUCCESS') {
					this.auditForm.remark =
						`会议合规管理-【供应商结算】${this.slForm.projectName}-${this.collectWayList[this.slForm.collectWay]}`;
				}
			},
			// 重置表单
			resetForm() {
				this.auditForm = {
					remark: '',
					errorMessage: ''
				};
				if (this.$refs.auditForm) {
					this.$refs.auditForm.resetFields();
				}
			},
			// 打开文件标注对话框
			annotateFile(file) {
				this.currentFileToAnnotate = file;
				this.fileAnnotationText = file.examineMessage || '';
				this.fileAnnotateDialogVisible = true;
			},
			// 判断文件是否为PDF
			isPdf(fileName) {
				return fileName.toLowerCase().endsWith('.pdf');
			},
			// 判断文件是否为图片
			isImage(fileName) {
				const imgExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp'];
				return imgExts.some(ext => fileName.toLowerCase().endsWith(ext));
			},
			isWord(filename) {
				return /\.(doc|docx)$/i.test(filename);
			},
			isExcel(filename) {
				return /\.(xls|xlsx)$/i.test(filename);
			},
			isPPT(filename) {
				return /\.(ppt|pptx)$/i.test(filename);
			},
			// 获取短文件名（防止文件名过长）
			getShortFileName(fileName) {
				if (fileName.length > 15) {
					return fileName.substring(0, 8) + '...' + fileName.slice(-7);
				}
				return fileName;
			},
			// 预览单个文件
			previewFile(file) {
				console.log(file)
				this.currentFile = file;
				this.previewUrl = file.ossUrl;
				this.showPreview = true;
			},
			// 预览整个文件夹
			previewFiles(material) {
				if (material.files.length > 0) {
					this.previewFile(material.files[0]);
				} else {
					this.$message.warning('此材料项下暂无文件可预览');
				}
			},
			// 关闭预览
			closePreview() {
				this.showPreview = false;
				this.previewUrl = '';
			},
			// 下载文件
			downloadFile() {
				if (this.currentFile) {
					window.open(this.currentFile.ossUrl, '_blank');
				}
			},
			// 打开标注对话框
			annotate(material) {
				this.currentAnnotateMaterial = material;
				this.annotationText = ''; // 清空之前的标注
				this.annotateDialogVisible = true;
			},
			//文件夹审核通过
			apply(material) {
				//文件夹整体审核通过
				annotateFolder({
					folderId: material.id,
					auditStatus: 1 //1审核通过 2审核驳回
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.$message.success('标注已保存');
						this.loadData()
					}
				})
			},
			// 保存标注
			saveAnnotation() {
				if (!this.annotationText.trim()) {
					this.$message.warning('请先输入标注内容');
					return;
				}
				annotateFolder({
					folderId: this.currentAnnotateMaterial.id,
					annotation: this.annotationText,
					auditStatus: 2 //1审核通过 2审核驳回
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.$message.success('标注已保存');
						this.annotateDialogVisible = false;
						this.loadData()
					}
				})
			},
			// 保存文件标注
			saveFileAnnotation() {
				if (!this.fileAnnotationText.trim()) {
					this.$message.warning('请先输入文件标注内容');
					return;
				}
				annotateFile({
					fileId: this.currentFileToAnnotate.id,
					annotation: this.fileAnnotationText,
					auditStatus: 2 //1审核通过 2审核驳回
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.$message.success('文件标注已保存');
						this.fileAnnotateDialogVisible = false;
						this.loadData()
					} else {
						this.$message.warn(res.msg);
					}
				})
			},
			// 模拟上传文件
			uploadFile(material) {
				this.$message.info('文件上传功能已触发，实际项目中调用上传API');
			},
			// 显示详情
			showMaterialDetails(material) {
				this.$message({
					message: `${material.folderName} 的详细信息`,
					customClass: 'custom-message',
					duration: 2000,
					iconClass: 'el-icon-info'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	body {
		margin: 0;
		padding: 0;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		background-color: #f5f7fa;
	}

	.app-container {
		//max-width: 1200px;
		margin: 20px auto;
		padding: 0 20px;
	}


	.material-list {
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		overflow: hidden;
	}

	.material-item {
		border-bottom: 1px solid #eaeef5;
		padding: 20px;
		transition: background-color .3s;
	}

	.material-item:last-child {
		border-bottom: none;
	}

	.material-item:hover {
		background-color: #f9fbfd;
	}

	.material-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15px;
	}

	.material-title {
		font-weight: 500;
		font-size: 16px;
		color: #1f2d3d;
	}

	.material-status {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.status-badge {
		padding: 4px 10px;
		font-size: 12px;
		border-radius: 12px;
		background-color: #ecf5ff;
		color: #67c23a;
		border: 1px solid #e1f3d8;
	}

	.status-badge.orange {
		background-color: #fdf6ec;
		color: #e6a23c;
		border-color: #faecd8;
	}

	.status-badge.red {
		background-color: #fdf6ec;
		color: red;
		border-color: #faecd8;
	}

	.file-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		gap: 15px;
		margin-top: 15px;
	}

	.file-item {
		position: relative;
		width: 100px;
		//height: 100px;
		//border: 1px dashed #dcdfe6;
		//border-radius: 4px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: border-color .3s;

		.file-preview {
			position: relative;
			background-color: #fff;
			width: 100%;
			width: 100%;
			//height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			border-radius: 10px;
			overflow: hidden;

			.file-icon {
				width: 100px;
				height: 100px;
				object-fit: contain;
				/* 可选：保持图片比例 */
			}
		}
	}

	.file-item:hover {
		border-color: #409eff;
	}

	//.file-preview {
	//  width: 60px;
	//  height: 60px;
	//  display: flex;
	//  align-items: center;
	//  justify-content: center;
	//  font-size: 40px;
	//  color: #909399;
	//}


	/* 文件右上角提示符号 */
	.file-warning-icon {
		position: absolute;
		top: 4px;
		right: 4px;
		// width: 20px;
		// height: 20px;
		// background: #E6A23C;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		cursor: pointer;
		z-index: 2;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

		i {
			font-size: 17px;
			font-weight: bold;
			color: #E6A23C;
		}
	}

	/* 文件悬浮遮罩层 */
	.file-hover-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s ease;
		z-index: 1;

		.mask-buttons {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
		}

		.mask-button {
			margin: 4px 0;
			width: 80px;
			background: rgba(255, 255, 255, 0.8);
			border: none;

			&:hover {
				background: white;
			}
		}
	}

	.file-name {
		//width: 100%;
		//padding: 0 5px;
		//font-size: 12px;
		//color: #606266;
		//text-align: center;
		//overflow: hidden;
		//text-overflow: ellipsis;
		//white-space: nowrap;
		margin-top: 8px;
		text-align: center;
		font-size: 12px;
		color: #606266;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.action-panel {
		display: flex;
		gap: 8px;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #909399;
		height: 100%;
	}

	.upload-placeholder i {
		font-size: 28px;
		margin-bottom: 5px;
	}

	.icon-pdf {
		color: #f56c6c;
	}

	.icon-image {
		color: #67c23a;
	}

	.icon-other {
		color: #909399;
	}

	.pdf-viewer-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .8);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pdf-viewer {
		width: 80%;
		height: 90%;
	}

	.close-preview {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 24px;
		color: white;
		cursor: pointer;
	}

	.formOptions {
		margin: 20px;
		display: flex;
		justify-content: center;
	}

	.noFile {
		width: 100px;
		height: 80px;
		//margin: 0 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-shadow: 0 2px 18px rgba(190, 190, 190, 0.31);
		border-radius: 10px;
		padding: 10px;
		color: #ccc;
		font-size: 16px;
		margin-bottom: 10px;

		i {
			font-size: 30px;
		}
	}

	.auditLog {
		margin: 40px;
		margin-top: 10px;
		padding: 40px;
		box-shadow: 0 2px 18px rgba(190, 190, 190, 0.31);
		border-radius: 4px;

		h1 {
			margin-bottom: 20px;
			font-size: 20px;
		}
	}

	.basicInformation {
		margin: 20px 0px;
		padding: 40px;
		box-shadow: 0 2px 18px rgba(190, 190, 190, 0.31);
		border-radius: 4px;

		h1 {
			margin-bottom: 20px;
			font-size: 20px;
		}

		h3 {
			margin-top: 10px;
			margin-bottom: 10px;
			//font-size: 20px;
		}

		// .reasonsForRejection {

		// 	// 超出5行后显示省略号
		// 	display: -webkit-box;
		// 	-webkit-line-clamp: 5;
		// 	-webkit-box-orient: vertical;
		// 	overflow: hidden;
		// 	text-overflow: ellipsis;

		// }
	}

	::v-deep .slForm {

		.el-form-item {
			display: flex;
			flex-direction: row;

			.el-form-item__label {
				width: 120px;
				text-align: right;
			}

			.el-form-item__content {
				margin-left: 0 !important;
				flex: 1;
			}

		}
	}

	.reviewfileList {
		box-shadow: 0 2px 18px rgba(190, 190, 190, 0.31);
		padding: 40px;
		margin-top: 40px;

		.page-title {
			margin: 0 0 40px;
			color: #1f2d3d;
			font-weight: 500;
			font-size: 22px;
			//border-bottom: 1px solid #e6ebf5;
			display: flex;
			align-items: center;
		}

		.page-title i {
			margin-right: 10px;
			font-size: 24px;
			color: #409EFF;
		}

	}
</style>